<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
	<meta name="renderer" content="webkit" />
	<meta name="force-rendering" content="webkit" />
	<title>单词详情</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2353733_71ibui9xvrb.css">
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<link rel="stylesheet" type="text/css" href="css/popup.css" />
	<script src="js/config.js"></script>
	<script src="js/axios.min.js"></script>
	<script src="js/axios-config.js?v=4"></script>
	<script src="js/vue/vue.js"></script>
	<script src="js/component.js?v=78"></script>
	<script src="js/navbar-component.js?v=2"></script>
	<script src="js/vue/vue-router.js"></script>
	<script src="js/srt.js?v=7"></script>
	<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.js"></script>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<style>
		body{
				-moz-user-select:none;/*火狐*/
				-webkit-user-select:none;/*webkit浏览器*/
				-ms-user-select:none;/*IE10*/
				-khtml-user-select:none;/*早期浏览器*/
				user-select:none;
		}
</style>
</head>

<body>
	<div id="app" v-cloak>
		<nav-top-bar :golink="backLink" linktitle="词汇详情"></nav-top-bar>
		<template v-if="dst">
			<audio id="transAudio" class="hide" :src="dst.tts"></audio>
			<div class="dancixiangqing-box1 d-f j-c-s">
				<div class="dancixiangqing-body flex1">
					<p class="danci-title">{{ word }}</p>
					<div class="danci-yufa">
						<span class="yufa-box">
							【{{ dst.pronunciation[0] }}】
							<img class="trans-icon"
								:src="playing ? 'img/index/icon_ship_yuyin_pre.png' : 'img/index/icon_ship_yuyin.png'"
								@click="wordPlay" />
						</span>
					</div>
				</div>
				<div class="dancixianqing-extra">
					<button class="qwjs" style="display:none">权威解释</button>
				</div>
			</div>
			<div class="dancixiangqing-box2">
				<p class="liju-top">释义</p>
				<div v-for="parts in dst.parts">
					<div class="liju-cell" v-for="part in parts">
						<p class="liju-cell-ying">
							{{part.part}}
						</p>
						<div class="liju-cell-zhong" v-for="mean in part.means">{{ mean }}</div>
					</div>
				</div>
			</div>
		</template>
	</div>
</body>
<script>
	var router = new VueRouter({
		mode: 'history'
	})
	var app = new Vue({
		el: '#app',
		router,
		data() {
			return {
				word: '',
				dst: null,

				playing: false,

			}
		},
		created() {
			this.word = this.$route.query.word
			this.trans();
		},
		computed:{
				// 页面回退
				backLink() {
            return document.referrer || '/'
        }
		},
		methods: {		
			trans(word) {
				axios.get('/mp/word/trans', { params: { word: this.word } }).then(res => {
					this.dst = res.data;
				})
			},

			wordPlay() {
                const listen = () => {
                    this.playing = false;
                    transAudio.removeEventListener('ended', listen);
                };
                transAudio.addEventListener('ended', listen);
                transAudio.play();
                this.playing = true;
            }
		}
	})
</script>

</html>